//获取头部关闭选项
let closeEl = document.querySelector("header div img");

//获取收入支出类型
let expendEl = document.querySelector(".expend");
let incomeEl = document.querySelector(".income");

//获取图标相关元素
let imgEl = document.querySelector(".img");
let downEl = document.querySelector(".down");
let upEl = document.querySelector(".up");

let ulEl = document.querySelector(".img .showUl");
let liEl = document.querySelectorAll(".img .showUl li");
let spanEl = document.querySelectorAll(".img .showUl li span");

//获取消费备注和价格元素
let annotationEl = document.querySelector(".annotation");
let moneyEl = document.querySelector(".money");
let keyInUlEl = document.querySelector(".keyin");
let saveEl = document.querySelector(".save");

//获取记录标头元素（今天、报销、图片）
let titleEl = document.querySelector(".title");
let reimbursementEl = document.querySelector(".reimbursement");

//存储消费类型是支出还是收入
let moneyType = false;
//存储消费种类
let consumeType;

let time = null;

//设置点击头部关闭选项跳转到主页面
closeEl.onclick = function () {
  window.location.href = "./firstPage.html";
};

//设置点击 支出收入事件
expendEl.addEventListener("click", expend);
incomeEl.addEventListener("click", income);

//设置切换消费类型点击事件
imgEl.addEventListener("click", change);

//设置输入消费价格点击事件
keyInUlEl.addEventListener("click", consume);

//设置标头元素（今天、报销、图片）点击事件
titleEl.addEventListener("click", changeTitle);

//功能函数

//设置点击标头元素（今天、报销、图片）
function changeTitle(e) {
  e.target.classList.toggle("titleShow");

  if (moneyType == false) {
    reimbursementEl.classList.contains("titleShow")
      ? ((saveEl.style.background = "#3694fa"), (moneyEl.style.color = "#3694fa"))
      : ((saveEl.style.background = "#eb585e"), (moneyEl.style.color = "#eb585e"));
  } else if (moneyType == true) {
    reimbursementEl.classList.contains("titleShow")
      ? ((saveEl.style.background = "#3694fa"), (moneyEl.style.color = "#3694fa"))
      : ((saveEl.style.background = "#2DBB7E"), (moneyEl.style.color = "#2DBB7E"));
  }
}

//本地存储函数
async function indexDB() {
  let consumeTypeEl = document.querySelector(".spanShow");

  await putData(
    moneyType,
    reimbursementEl.classList.contains("titleShow"),
    consumeTypeEl.textContent,
    annotationEl.value,
    Number(moneyEl.value)
  );

  annotationEl.value = null;
  moneyEl.value = "0.00";
  consumeTypeEl.classList.remove("spanShow");
  consumeTypeEl.previousElementSibling.classList.remove("imgShow");
  sum = "";
}

let sum = "";
//获取消费各类信息
function consume(e) {
  //输入数字或小数点则输入到消费价格框
  if (e.target.classList.contains("number")) {
    sum += e.target.textContent;
    moneyEl.value = sum;
  }
  //如果按一次删除键，则删除一个数字
  if (e.target.classList.contains("delete")) {
    console.log(sum.length);
    sum = sum.slice(0, sum.length - 1);
    moneyEl.value = sum;
    if (sum.length == 0) {
      return (moneyEl.value = "0.00");
    }
  }

  //如果按下保存，则存入相应数据到本地，并跳转首页
  if (e.target.classList.contains("save")) {
    indexDB();
    time = setInterval(() => {
      window.location.href = "./firstPage.html";
    }, 0);
  }

  //如果按下再记，则存入相应数据到本地，并清空所有选项重新再记
  if (e.target.classList.contains("again")) {
    indexDB();
  }
}

//支出时消费类型改为false
function expend(e) {
  moneyType = false;
  e.target.classList.add("show");
  incomeEl.classList.remove("show");

  //切换成支出类型的图标
  downEl.classList.add("showUl");
  upEl.classList.remove("showUl");

  saveEl.style.background = "#eb585e";
  moneyEl.style.color = "#eb585e";

  //判断报销是否点击了，点击了就换成报销的颜色
  reimbursementEl.classList.contains("titleShow")
    ? ((saveEl.style.background = "#3694fa"), (moneyEl.style.color = "#3694fa"))
    : ((saveEl.style.background = "#eb585e"), (moneyEl.style.color = "#eb585e"));
}

//收入时消费类型改为true
function income(e) {
  moneyType = true;
  expendEl.classList.remove("show");
  e.target.classList.add("show");

  //切换成收入类型的图标
  upEl.classList.add("showUl");
  downEl.classList.remove("showUl");

  saveEl.style.background = "#2DBB7E";
  moneyEl.style.color = "#2DBB7E";

  //判断报销是否点击了，点击了就换成报销的颜色
  reimbursementEl.classList.contains("titleShow")
    ? ((saveEl.style.background = "#3694fa"), (moneyEl.style.color = "#3694fa"))
    : ((saveEl.style.background = "#2DBB7E"), (moneyEl.style.color = "#2DBB7E"));
}

//切换消费种类
function change(e) {
  let liEl = document.querySelectorAll(".img .showUl li");

  for (const item of liEl) {
    item.firstElementChild.classList.remove("imgShow");
    item.lastElementChild.classList.remove("spanShow");
  }
  consumeType = e.target.lastElementChild.textContent;
  e.target.firstElementChild.classList.toggle("imgShow");
  e.target.lastElementChild.classList.toggle("spanShow");
}
